<template>
  <div class="menuList">
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="text-align: left;">
        <i class="el-icon-s-claim"></i>
        <b>新闻列表</b>
        <el-button style="float:right" @click="addNews">ADD</el-button>
      </div>
      <el-table :data="newsList" style="width: 100%" height="690">
        <el-table-column label="新闻ID" prop="news_event_id" width="100"></el-table-column>
        <el-table-column label="新闻标题" prop="news_event_title"></el-table-column>
        <el-table-column label="新闻内容" prop="news_event_content"></el-table-column>
        <el-table-column label="创建时间" prop="create_time"></el-table-column>
        <el-table-column fixed="right" label="操作" width="250">
          <template slot-scope="scope">
            <el-button plain size="mini" @click="editNews(newsList[scope.$index].news_event_id)">修改</el-button>
            <el-button
              type="info"
              plain
              size="mini"
              @click="lookNews(newsList[scope.$index].news_event_id),scope.$index"
            >查看</el-button>
            <el-button
              type="danger"
              plain
              size="mini"
              @click="delNews(newsList[scope.$index].news_event_id),scope.$index"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <add-news @closeNews="closeNews" :newsShow="newsShow"></add-news>
  </div>
</template>

<script>
import addNews from "@/share/alter/addNews";
export default {
  components: {
    addNews
  },
  data() {
    return {
      newsList: [], //新闻列表
      newsShow: 0 //父子组件传值
    };
  },
  mounted() {
    this.getNews();
  },
  methods: {
    //添加新闻
    addNews() {
      var editVal = {
        news_event_id: "",
        admin_id: "",
        news_event_title: "",
        create_time: "",
        news_event_content: ""
      };
      this.newsShow = [1, 0, editVal];
    },
    closeNews(msg) {
      console.log(msg);
      this.newsShow = msg;
      this.getNews();
    },
    //新闻赛事列表
    getNews() {
      var that = this;
      that.$axios
        .get("apis/admin/newseventlist")
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              var dataLiat = res.data.data;
              for (var i = 0; i < dataLiat.length; i++) {
                dataLiat[i].create_time = that
                  .$moment(dataLiat[i].create_time)
                  .format("YYYY-MM-DD");
              }
              that.newsList = dataLiat;
            }
            console.log(that.newsList);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    editNews(id) {
      console.log(id);
      for (var i = 0; i < this.newsList.length; i++) {
        if (this.newsList[i].news_event_id == id) {
          var editVal = this.newsList[i];
        }
      }
      this.newsShow = [1, 1, editVal];
    },
    //查看新闻
    lookNews(id) {
      console.log(id);
      for (var i = 0; i < this.newsList.length; i++) {
        if (this.newsList[i].news_event_id == id) {
          var editVal = this.newsList[i];
        }
      }
      this.newsShow = [1, 2, editVal];
    },
    //删除新闻赛事
    delNews(id, index) {
      var that = this;
      that.$axios
        .post(
          "apis/admin/delnewsevent",
          this.$qs.stringify({
            newsEventId: id //删除行的ID
          })
        )
        .then(function(res) {
          console.log(res);
          if (res.status == 200) {
            if (res.data.status == 1) {
              that.getNews();
              that.$message({
                message: "删除成功哦~",
                type: "success"
              });
            }
            console.log(that.newsList);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  
};
</script>

<style lang="less" scoped>
.menuList {
  height: 830px;
  .el-card {
    width: 100% !important;
  }
  .text {
    font-size: 14px;
  }
  .el-collapse-item__header {
    border-bottom: none !important;
  }
  .item {
    margin-bottom: 18px;
  }
  .evaluate {
    width: 100%;
    height: 100px;
  }
  .evaluate p {
    line-height: 20px;
  }
  .headImgS img {
    border-radius: 50px;
    border: 1px solid rgb(252, 122, 122);
    width: 30px;
    height: 30px;
  }
  .headImgS b {
    position: absolute;
    margin-top: 5px;
    padding-left: 14px;
  }
  .el-tag {
    margin-top: 10px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 480px;
  }
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
}
</style>
